<template>
  <div class="swiper-container">
    <div class="posss">
      <span @click="dbclick()">{{getcity}}</span>
    </div>
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="i in list" :key="i.bannerId">
        <img :src="i.imgUrl" alt />
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
  </div>
</template>
<script>
//首页头部
import { getswiper } from "@/api";
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
import Cookies from 'js-cookie'
export default {
  methods: {
    dbclick() {
      this.$router.push("/city");
    }
  },
  computed:{
    getcity(){
      return JSON.parse(Cookies.get('city')).name
    
    }
  },
  data() {
    return {
      list: "",
    };
  },
  created() {
    getswiper().then(resp => {
      if (resp.status === 200) {
        this.list = resp.data.data;
      }
    });
  },
  updated() {
    var mySwiper = new Swiper(".swiper-container", {
      loop: true, // 循环模式选项
      autoplay: {
        disableOnInteraction: false,
        delay: 3000,
        stopOnLastSlide: false
      },
      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
        clickable: true
      },
      scrollbar: {
        el: ".swiper-scrollbar"
      }
    });
  }
};
</script>
<style  scoped>
.swiper-container {
  width: 7.5rem;
  height: 4.2rem;
}
img {
  width: 7.5rem;
  height: 4.2rem;
}
.swiper-wrapper {
  position: relative;
}
.posss {
  position: absolute;
  z-index: 99;
  top: 0.5rem;
  left: 0.5rem;
  width: 1.3rem;
  height: 0.6rem;
  border-radius: 0.3rem;
  background-color: darkgray;
  opacity: 0.8;
  text-align: center;
  line-height: 0.6rem;
}
.posss span {
  width: 1rem;
  color: white;
  opacity: 1;
}
</style>